import React, { useState, useEffect } from "react";
import styles from '@/assets/css/user.module.css';
import type business from "@/types/business";
import TabBar from "@/components/TabBar";
import { NavLink } from "react-router-dom";

const Index = () => {
    const [businessInfo, setBusinessInfo] = useState<business>({} as business);
    const defaultAvatar = '/assets/images/default-avatar.png';

    useEffect(() => {
        // 从Cookie中获取用户信息
        const userInfo = React.Cookies.load('business');
        if (userInfo) {
            setBusinessInfo(userInfo);
        }
    }, []);

    const OnLogout = () => {
        React.UI.Dialog.confirm({
            title: '退出账号',
            content: '是否退出当前账号？',
            onConfirm: () => {
                React.success('退出当前账号成功', () => {
                    React.Cookies.remove('business', { path: '/' });
                    React.business = {} as business;
                    React.navigate('/business/login');
                });
            }
        });
    }

    return (
        <>
            <div className={styles.header}>
                <div className={styles.userinfo}>
                    <div className={styles.avatar}>
                        <img 
                            src={businessInfo?.avatar_cdn || defaultAvatar} 
                            alt="头像" 
                            onError={(e) => {
                                e.currentTarget.src = defaultAvatar;
                            }}
                        />
                    </div>
                    <div className={styles.nickname}>
                        {businessInfo?.nickname || '未设置昵称'}
                    </div>
                    <div className={`${styles.nickname} ${styles.content}`}>
                        {businessInfo?.mobile_text || businessInfo?.mobile || '未绑定手机'}
                    </div>
                </div>
                <div className={styles.corrugated}>
                    <div className={`${styles.wave_top} ${styles.wave_item}`}></div>
                    <div className={`${styles.wave_middle} ${styles.wave_item}`}></div>
                </div>
            </div>
            <div className={styles.menu_cell}>
                <div className={styles.item}>
                    <NavLink to="/business/profile">
                        <div className={styles.title}>个人资料</div>
                        <div className={styles.icon}>
                            <img src={'/assets/images/right.png'} alt="箭头" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <NavLink to="/business/email">
                        <div className={styles.title}>邮箱认证</div>
                        <div className={styles.icon}>
                            <img src={'/assets/images/right.png'} alt="箭头" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <NavLink to="/guest">
                        <div className={styles.title}>住客信息</div>
                        <div className={styles.icon}>
                            <img src={'/assets/images/right.png'} alt="箭头" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <NavLink to="/order">
                        <div className={styles.title}>房间订单</div>
                        <div className={styles.icon}>
                            <img src={'/assets/images/right.png'} alt="箭头" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <NavLink to="/business/coupon">
                        <div className={styles.title}>我的优惠券</div>
                        <div className={styles.icon}>
                            <img src={'/assets/images/right.png'} alt="箭头" />
                        </div>
                    </NavLink>
                </div>
                <div className={styles.item}>
                    <a onClick={OnLogout}>
                        <div className={styles.title}>退出登录</div>
                        <div className={styles.icon}>
                            <img src={'/assets/images/right.png'} alt="箭头" />
                        </div>
                    </a>
                </div>
            </div>

            <TabBar />
        </>
    )
}

export default Index;